Added auto page script#44
Conversation
👷 Deploy request for codestitch-intermediate pending review.Visit the deploys page to approve it
|
|
The core idea is solid and genuinely useful. Thanks for the contribution @CalgaryWebStudios ! Apart from the bug fixes and small tweaks I've highlighted above, there are consistencies I'd like to maintain in the way code is written and formatted, and I think there should also be a new section in the readme to explain how to use the script. I'm going to prepare some changes on my branch. In the meantime, feel free to chime in on my code review comments. Thanks again and looking forward to hearing from you. |
|
Thanks for taking a look @BuckyBuck135! I looked in the files changed and could not find any comments that were left, perhaps I am missing something? Looking forward to seeing the changes on your branch! |
Sorry, I forgot to submit the review lol |
…itleCase filter, optional CTA in _template.txt
…itleCase filter, optional CTA in _template.txt
|
Fixed naming inconsistensies, cleaned up extra code, refactored the titleCase filter, optional CTA in _template.txt. Let me know what you think. |
BuckyBuck135
left a comment
There was a problem hiding this comment.
Refactored create-page.js to fix a few remaining issues
| @@ -0,0 +1,35 @@ | |||
| const fs = require("fs"); | |||
There was a problem hiding this comment.
A few issues remain in the current version:
- Relative paths (
path.join("src/content/pages", ...)) will break if the script is ever run from a directory other than the project root. Other scripts in this repo useprocess.cwd()to anchor paths - No check for whether
_template.txtexists: if it's missing the user gets a raw Node stack trace instead of a helpful message - No overwrite guard: if a page with the same slug already exists it gets silently overwritten
- The commented-out
replaceAllline can be removed entirely now
Suggested rewrite:
const fs = require("fs");
const path = require("path");
// ─── Helpers ─────────────────────────────────────────────────────────────────
function resolvePath(p) {
return path.join(process.cwd(), p);
}
function slugify(name) {
return name
.toLowerCase()
.replace(/[^a-z0-9\s-]/g, "")
.replace(/\s+/g, "-")
.replace(/-+/g, "-")
.replace(/^-+|-+$/g, "");
}
// ─── Main ─────────────────────────────────────────────────────────────────────
function main() {
const input = process.argv[2];
if (!input) {
console.log('Please provide page names. Example: npm run create-page -- "Contact, About, Services"');
process.exit(1);
}
const templatePath = resolvePath("src/content/pages/_template.txt");
if (!fs.existsSync(templatePath)) {
console.log(`Template not found: ${templatePath}`);
process.exit(1);
}
const template = fs.readFileSync(templatePath, "utf8");
const pages = input.split(",").map((p) => p.trim());
pages.forEach((page) => {
const slug = slugify(page);
if (!slug) return;
const htmlPath = resolvePath(`src/content/pages/${slug}.html`);
const lessPath = resolvePath(`src/assets/less/${slug}.less`);
if (fs.existsSync(htmlPath)) {
console.log(`Skipped ${slug}.html — already exists`);
return;
}
fs.writeFileSync(htmlPath, template);
fs.writeFileSync(lessPath, "");
console.log(`Created ${htmlPath} and ${lessPath}`);
});
}
main();| @@ -1,9 +1,10 @@ | |||
| --- | |||
| title: "About | Code Stitch Web Designs" | |||
| title: "About Us| Code Stitch Web Designs" | |||
| permalink: "/about/" | ||
| --- | ||
|
|
||
|
|
|
Can you also add this section to the readme, under ## Customization Scripts, after the existing entries. ### Create New Page
Run `npm run create-page -- "Page Name"` to scaffold a new page. Pass a comma-separated list to create multiple pages at once:
npm run create-page -- "About, Services, Contact" |
I added a new file called "create-page.js" in the scripts folder, what it does is it auto generates 1 or multiple pages for the user, and it automatically creates its corresponding .LESS file as well, it places everything in the correct directories and it auto pastes the _template.txt.
I updated _template.txt so now it will automatically populate the permalink section with the HTML file slug, and the page title will automatically be set to "Page Name | Client | City, State". Another change I made was to auto-link the new generated CSS file in the head. Another repetitive task fully automated.
To allow for these changes, I added a new custom filter in ".eleventy.js" on line 87.
I also updated the package.json with the command name, I used "new-page"
USAGE:
I hope you find this useful for the Code Stitch community! If not, no worries, but for me personally, it saves a ton of time!